<template>
<div class="page-province">
  <div class="fr ac f-14 mb-30">
    <template v-if="!id">
      <span>用户组织：</span>
      <span class="mr-40">{{$store.state.user.organizationname}}</span>
      <span>组织负责人：</span>
      <span class="mr-40">{{$store.state.user.headOfUnit}}</span>
      <span>电话：</span>
      <span class="mr-40">{{$store.state.user.phone}}</span>
    </template>
    <template v-else>
      <h2>{{province.name}}</h2>
    </template>
  </div>
  <div class="statistics fr jsb mb-30">
    <div class="item">
      <div class="fr ac mt-25">
        <img src="../../assets/images/risk.png" class="pl-20 pr-20">
        <div class="f1">
          <div class="f-14">风险等级</div>
          <div class="f-24 b mt-5">{{statistics.risklevel}}</div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="fr ac mt-25">
        <img src="../../assets/images/temperature.png" class="pl-20 pr-20">
        <div class="f1">
          <div class="f-14">体温异常</div>
          <div class="f-24 b mt-5">{{statistics.temperature}}</div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="fr ac mt-25">
        <img src="../../assets/images/case.png" class="pl-20 pr-20">
        <div class="f1">
          <div class="f-14">确认病例</div>
          <div class="f-24 b mt-5">{{statistics.confirmrisk}}</div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="fr ac mt-25">
        <img src="../../assets/images/test.png" class="pl-20 pr-20">
        <div class="f1">
          <div class="f-14">核酸检测</div>
          <div class="f-24 b mt-5">{{statistics.testper}}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="options fr f-14 mb-15">
    <div class="label">地区</div>
    <div class="f1 fr" style="flex-wrap: wrap;">
      <span class="mb-15 mr-30 a" :class="{ on: statistics.params.cityno === '' }" @click="statistics.params.cityno = '';getStatistics()">全部</span>
      <span v-for="item in province.children" :key="item.code" class="mb-15 mr-30 a" :class="{ on: statistics.params.cityno === item.code }" @click="statistics.params.cityno = item.code;getStatistics()">{{item.name}}</span>
    </div>
  </div>
  <div class="options fr ac f-14 mb-30">
    <div class="label">学校等级</div>
    <span v-for="item in schoolLevelList" :key="item.code" class="mr-30 a" :class="{ on: statistics.params.schoolLevel === item.code }" @click="statistics.params.schoolLevel = item.code;getStatistics()">{{item.name}}</span>
  </div>
  <div class="options fr ac f-14 mb-30">
    <div class="label">人员</div>
    <span v-for="item in personTypelist" :key="item.code" class="mr-30 a" :class="{ on: statistics.params.personType === item.code }" @click="statistics.params.personType = item.code;getStatistics()">{{item.name}}</span>
  </div>
  <div class="rect card p-20 fr f-14 mb-15">
    <div class="title fajc">测温统计</div>
    <div class="f1 fr jsb">
      <div v-for="item in statistics.temList" :key="item.text" class="item oh fc a" @click="$router.push(`/monitoring?statisticstype=${item.statisticstype}&istoday=${item.istoday}`)">
        <b class="fajc">{{item.count}}</b>
        <div class="f1 fajc"><i></i>{{item.text}}</div>
      </div>
    </div>
  </div>
  <div class="rect card p-20 fr f-14 mb-15">
    <div class="title fajc">隔离统计</div>
    <div class="f1 fr jsb">
      <div v-for="item in statistics.gapList" :key="item.text" class="item oh fc a" @click="$router.push(`/monitoring?statisticstype=${item.statisticstype}&istoday=${item.istoday}`)">
        <b class="fajc">{{item.count}}</b>
        <div class="f1 fajc"><i></i>{{item.text}}</div>
      </div>
    </div>
  </div>
  <div class="rect card p-20 fr f-14 mb-15">
    <div class="title fajc">停复课统计</div>
    <div class="f1 fr jsb">
      <div v-for="item in statistics.classList" :key="item.text" class="item oh fc a" @click="$router.push(`/monitoring?statisticstype=${item.statisticstype}&istoday=${item.istoday}`)">
        <b class="fajc">{{item.count}}</b>
        <div class="f1 fajc"><i></i>{{item.text}}</div>
      </div>
    </div>
  </div>
  <div class="rect card p-20 fr f-14 mb-40">
    <div class="title fajc f-12">确诊和其他统计</div>
    <div class="f1 fr jsb">
      <div v-for="item in statistics.confirmList" :key="item.text" class="item oh fc a" @click="$router.push(`/monitoring?statisticstype=${item.statisticstype}&istoday=${item.istoday}`)">
        <b class="fajc">{{item.count}}</b>
        <div class="f1 fajc"><i></i>{{item.text}}</div>
      </div>
    </div>
  </div>
  <h2 class="f-18 mb-30">趋势分析</h2>
  <div class="options fr ac f-14 mb-20">
    <div class="label">时间</div>
    <div class="f1 fr ac">
      <span class="mr-30 a" :class="{ on: trend.isDate === '1' }" @click="changeTime('1')">今天</span>
      <span class="mr-30 a" :class="{ on: trend.isDate === '7' }" @click="changeTime('7')">7天</span>
      <span class="mr-30 a" :class="{ on: trend.isDate === '14' }" @click="changeTime('14')">14天</span>
      <span class="mr-40 a" :class="{ on: trend.isDate === '30' }" @click="changeTime('30')">30天</span>
      <el-date-picker v-model="trend.trendTime" type="daterange" @change="changeDate" format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
    </div>
  </div>
  <div class="options fr ac f-14 mb-30">
    <div class="label">统计项</div>
    <span v-for="item in statisticstypeList" :key="item.code" class="mr-30 a" :class="{ on: trend.statisticstype === item.code }" @click="changeStatisticstype(item)">{{item.name}}</span>
  </div>
  <div class="fr jsb mb-30" ref="chart">
    <div v-show="trend.list.length" class="line" ref="line" :style="{ width: `${trend.width}px` }"></div>
    <div v-show="!trend.list.length" class="line fajc" :style="{ width: `${trend.width}px` }">
      <b class="f-24" style="color: #0facf8;">无数据</b>
    </div>
    <div v-show="pie.list.length" class="pie" ref="pie" :style="{ width: `${pie.width}px` }"></div>
    <div v-show="!pie.list.length" class="pie fajc" :style="{ width: `${pie.width}px` }">
      <b class="f-24" style="color: #0facf8;">无数据</b>
    </div>
  </div>
  <h2 class="f-18 mb-30">地区概况</h2>
  <div v-show="pie.list.length" class="map" ref="map" :style="{ width: `${map.width}px` }"></div>
  <div v-show="!pie.list.length" class="map fajc" :style="{ width: `${map.width}px` }">
    <b class="f-24" style="color: #0facf8;">无数据</b>
  </div>
  <div class="fr ac mt-40 mb-30">
    <h2 class="f1 f-18">全省概况</h2>
    <a class="link" :href="`http://wcxt.bjyulinkeji.com/health/getBranchs/dataexport?ranklevel=2&provinceno=${provinceno}`">导出</a>
  </div>
  <div class="list">
    <table>
      <thead>
      <th>城市</th>
      <th>风险等级</th>
      <th>今日测温</th>
      <th>今日体温异常</th>
      <th>当前疑似</th>
      <th>当前确诊</th>
      <th>当前医疗隔离</th>
      <th>当前居家隔离</th>
      <th>累计康复人数</th>
      <th>详情</th>
      </thead>
      <tbody>
      <tr v-for="item in city.list" :key="item.branchCode">
        <td><div class="fajc tl"><i :class="[item.risklevel]"></i>{{item.name}}</div></td>
        <td>{{item.risklevel}}</td>
        <td v-for="(v, i) in item.list" :key="i">{{v}}</td>
        <td><span class="a link" @click="$router.push(`/city/${item.branchCode}`)">详情 ></span></td>
      </tr>
      <tr v-if="!city.list.length">
        <td colspan="10">无数据</td>
      </tr>
      </tbody>
    </table>
    <!--<div v-if="city.list.length" class="page tc mt-30">-->
      <!--<el-pagination background layout="prev, pager, next" prev-text="上一页" next-text="下一页" :pager-count="5" :page-size="10" :total="city.total" :current-page="city.pagecurrent" @current-change="getCity"/>-->
    <!--</div>-->
  </div>
</div>
</template>

<script>
import map from '@/utils/map'
import moment from '@/utils/moment'
import getMap from '@/utils/getMap'

export default {
  name: 'page-province',
  props: ['id'],
  data () {
    return {
      schoolLevelList: [
        { name: '全部', code: '' },
        { name: '幼儿园', code: '1' },
        { name: '小学', code: '2' },
        { name: '初中', code: '3' },
        { name: '高中', code: '4' },
        { name: '职高', code: '5' },
        { name: '中专', code: '6' },
        { name: '大学', code: '7' }
      ],
      personTypelist: [
        { name: '全部', code: '' },
        { name: '学生', code: '1' },
        { name: '职工', code: '2' },
        { name: '访客', code: '3' }
      ],
      statisticstypeList: [
        { name: '测温', code: '1' },
        { name: '体温异常', code: '2' },
        { name: '停课班级', code: '8' },
        { name: '留校观察', code: '3' },
        { name: '居家隔离', code: '7' },
        { name: '医疗隔离', code: '5' },
        { name: '返校复课', code: '11' }
      ],
      risklevelList: [
        { text: '绿', value: 'g' },
        { text: '黄', value: 'y' },
        { text: '蓝', value: 'b' },
        { text: '橙', value: 'o' },
        { text: '红', value: 'r' }
      ],
      statistics: {
        params: {
          cityno: '',
          schoolLevel: '',
          personType: ''
        },
        risklevel: '',
        temperature: '',
        confirmrisk: '',
        testper: '',
        temList: [],
        gapList: [],
        classList: [],
        confirmList: []
      },
      trend: {
        isToday: '1',
        trendTime: [],
        isDate: '1',
        statisticstype: '1',
        width: 0,
        list: [],
        chart: null
      },
      pie: {
        width: 0,
        list: [],
        chart: null
      },
      map: {
        width: 0,
        chart: null
      },
      city: {
        pagecurrent: 1,
        total: 0,
        list: []
      }
    }
  },
  computed: {
    provinceno () {
      return ~~this.id || this.$store.state.user.provinceid
    },
    province () {
      return map.find(p => p.code === this.provinceno)
    }
  },
  methods: {
    getStatistics () {
      const { cityno, schoolLevel, personType } = this.statistics.params
      this.$http('/health/healthInfoStatistics/getStatistics', {
        ranklevel: cityno ? '3' : '2',
        provinceno: cityno ? '' : this.provinceno,
        cityno,
        schoolLevel,
        personType
      }).then(
        res => {
          if (res.code == 200) {
            const { data } = res

            // 四大块
            this.statistics.risklevel = data[0].risklevel
            data.forEach(v => {
              if (v.text === '日测温异常') this.statistics.temperature = v.count
              if (v.text === '今日确诊') this.statistics.confirmrisk = v.count
              if (v.text === '日核酸检测') this.statistics.testper = v.count
            })

            this.statistics.temList = ['日测温', '日测温异常', '日疑似人数', '日康复人数'].map(name => {
              return data.find(v => v.text === name) || {}
            })
            this.statistics.gapList = ['日医疗隔离', '日居家隔离', '医疗隔离', '居家隔离'].map(name => {
              return data.find(v => v.text === name) || {}
            })
            this.statistics.classList = ['日停课班级', '日复课班级', '停课班级', '日返校复课人数'].map(name => {
              return data.find(v => v.text === name) || {}
            })
            this.statistics.confirmList = ['今日确诊', '日核酸检测', '确诊人数', '日消杀次数'].map(name => {
              return data.find(v => v.text === name) || {}
            })
          }
        }
      )
    },
    getTrends() {
      this.$http('/health/healthInfoStatistics/getTrends', {
        isdate: this.trend.isDate,
        provinceno: this.provinceno,
        istoday: this.trend.isToday,
        statisticstype: this.trend.statisticstype,
        begintime: this.trend.trendTime[0] || '',
        endtime: this.trend.trendTime[1] || ''
      }).then(
        res => {
          if (res.code == 200) {
            this.trend.list = res.data
            this.drawLine(res.data)
          }
        }
      )
    },
    getBranchs () {
      this.$http('health/healthInfoStatistics/getBranchs', {
        ranklevel: '2',
        provinceno: this.provinceno,
      }).then(res => {
        this.pie.list = res.data
        this.drawPie(res.data)
        this.drawMap(res.data)
        const headlist = [
          { title: '今日测温', name: '日测温' },
          { title: '今日体温异常', name: '日测温异常'},
          { title: '当前疑似', name: '疑似人数'},
          { title: '当前确诊', name: '确诊人数'},
          { title: '当前医疗隔离', name: '医疗隔离'},
          { title: '当前居家隔离', name: '居家隔离'},
          { title: '累计康复人数', name: '康复人数'}
        ]
        res.data.forEach(item => {
          item.list = headlist.map(v => {
            const _item = item.data.find(val => val.branchName === v.name) || {}
            return _item.count
          })
        })
        this.city.list = res.data
        // this.city.total = res.data.total
      })
    },
    drawLine (data) {
      let x
      let y
      if (this.trend.isToday === '1') {
        x = new Array(24).fill('').map((v, i) => `${i}点`)
        y = new Array(24).fill('').map((v, i) => {
          const item = data.find(item => item.unitime - 0 === i) || {}
          return { name: `${i}点`, value: item.count || 0, data: item }
        })
      } else {
        x = data.sort((a, b) => (new Date(a.unitime) - 0) - (new Date(b.unitime) - 0)).map(v => v.unitime)
        y = data.sort((a, b) => (new Date(a.unitime) - 0) - (new Date(b.unitime) - 0)).map(v => ({ value: v.count, data: v }))
      }
      this.trend.chart.setOption({
        tooltip: {
          trigger: 'axis', //标签
          formatter ([params]) {
            return `${params.name}：${params.value}`
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: x,
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          //设置网格线颜色
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#333'],
              width: 1,
              type: 'solid'
            }
          }
        }],
        series: [{
          type: 'line',
          itemStyle: {
            normal: {
              areaStyle: {
                type: 'default',
                color: '#090f42',
              },
              lineStyle: { //线的颜色
                color: '#2c39ec'
              },
              //以及在折线图每个日期点顶端显示数字
              label: {
                position: 'top',
                textStyle: {
                  color: '#fff'
                }
              }
            },
          },
          data: y
        }]
      })
    },
    drawPie (data) {
      this.pie.chart.setOption({
        title: {
          text: moment().format('YYYY-MM-DD'),
          textAlign: 'left',
          padding: 30,
          textStyle: {
            fontSize: 24,
            fontWeight: 'normal',
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          type: 'scroll',
          right: '10%',
          top: 50,
          bottom: 20,
          padding: 20,
          data: data.map(v => v.name),
          icon: "circle",
          textStyle: {
            fontSize: 14,
            color: '#B6B9BE'
          },
          pageTextStyle: {
            color: '#B6B9BE'
          },
          formatter (name) {
            const item = data.find(v => v.name === name) || { data: [{}] }
            return `${name}：${item.data[0].count}`
          }
        },
        series: [{
          type: 'pie',
          radius: ['30%', '50%'],
          center: ['30%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data.map(v => ({ name: v.name, value: v.data[0].count }))
        }]
      })
    },
    async drawMap (data) {
      const map = await getMap(this.provinceno + '', this.province.name)
      this.map.chart.setOption({
        tooltip: {
          show: true,
          trigger: 'item',
          padding: 20,
          formatter (params) {
            return `<div class="map-tooltip">
                      <h3>${params.name} ${moment().format('YYYY-MM-DD')}</h3>
                      ${params.data.data.map(v => `<div class="fr ac"><i class="dot"></i>${v.branchName}：<div class="f1"></div>${v.count}</div>`).join('')}
                    </div>`
          }
        },
        geo: {
          map: this.province.name, // 展示城市地图 可动态设置
          label: {
            // 区域名称显示
            show: true,
            textStyle: {
              color: "#FFF",
              fontWeight: 600,
              fontSize: 10
            }
          },
          zoom: 1.2, // 放大比例
          itemStyle: {
            // 区域间样式调节
            borderColor: "lightblue",
            areaColor: "rgb(10, 22, 63)"
          },
          emphasis: {
            // 区域高亮显示时状态
            label: {
              // 高亮时字体样式
              color: "#FFF",
              textStyle: {
                fontWeight: 600,
                fontSize: 14
              }
            },
            itemStyle: {
              // 高亮是区域样式
              areaColor: "rgb(42, 114, 246)",
              borderColor: "#ccc"
            }
          }
        },
        series: [
          {
            type: 'map',
            geoIndex: 0,
            data
          }
        ]
      })
    },
    onResize () {
      const { offsetWidth: width } = this.$refs.chart
      this.trend.width = (width - 20) * 0.55
      this.pie.width = (width - 20) * 0.45
      this.map.width = width
      this.$nextTick(() => {
        if (this.trend.chart) this.trend.chart.resize()
        if (this.pie.chart) this.pie.chart.resize()
        if (this.map.chart) this.map.chart.resize()
      })
    },
    changeTime (v) {
      if (v === '1') {
        this.trend.isToday = '1'
      } else {
        this.trend.isToday = '0'
      }
      this.trend.trendTime = []
      this.trend.isDate = v
      this.getTrends()
    },
    changeDate () {
      const begin = this.trend.trendTime[0] || ''
      const end = this.trend.trendTime[1] || ''
      const date = moment().format('yyyy-MM-DD')

      if (begin === date && end === date) this.trend.isToday = '1'
      else this.trend.isToday = '0'

      if (begin && end) this.trend.isDate = '0'
      else this.trend.isDate = '1'
      this.getTrends()
    },
    changeStatisticstype (v) {
      this.trend.statisticstype = v.code
      this.getTrends()
      this.drawPie(this.pie.list)
    },
    getCity () {
      const { pagecurrent } = this.city
      this.$http('/health/healthInfoStatistics/getPageBranchs', {
        ranklevel: '2',
        provinceno: this.provinceno,
        pagecurrent,
        pagesize: 10
      }).then(res => {
        if (res.code = 200) {
          const headlist = [
            { title: '今日测温', name: '日测温' },
            { title: '今日体温异常', name: '日测温异常'},
            { title: '当前疑似', name: '疑似人数'},
            { title: '当前确诊', name: '确诊人数'},
            { title: '当前医疗隔离', name: '医疗隔离'},
            { title: '当前居家隔离', name: '居家隔离'},
            { title: '累计康复人数', name: '康复人数'}
          ]
          res.data.records.forEach(item => {
            item.list = headlist.map(v => {
              const _item = item.data.find(val => val.branchName === v.name) || {}
              return _item.count
            })
          })
          this.city.list = res.data.records
          this.city.total = res.data.total
        }
      })
    }
  },
  created () {
    this.getStatistics()
    // this.getCity()
  },
  mounted () {
    this.trend.chart = this.$echarts.init(this.$refs.line)
    this.pie.chart = this.$echarts.init(this.$refs.pie)
    this.map.chart = this.$echarts.init(this.$refs.map)
    this.map.chart.on('click', 'series.map', params => {
      this.$router.push(`/city/${params.data.branchCode}`)
    })
    this.onResize()
    window.addEventListener('resize', this.onResize)
    this.getTrends()
    this.getBranchs()
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.onResize)
  }
}
</script>

<style lang="less">
.page-province {color: #fff;
  .statistics {
    .item {width: 256px;height: 192px;background: #000418 no-repeat 50% 72px;background-size: 346px;
      img {width: 30px;}
      &:first-child {background-image: url("../../assets/images/t1.png");}
      &:nth-child(2) {background-image: url("../../assets/images/t2.png");}
      &:nth-child(3) {background-image: url("../../assets/images/t3.png");background-position: 50% 26px;}
      &:nth-child(4) {background-image: url("../../assets/images/t4.png");background-position: 50% 80px;}
    }
  }
  .rect {
    .title {width: 16px;writing-mode: vertical-rl;border: 1px solid #192b7c;background-color: #0b1233;border-radius: 4px;padding: 0 8px;letter-spacing: 4px;margin-right: 60px;}
    .item {width: 226px;height: 128px;border: 1px solid #454b66;border-radius: 6px;
      b {height: 80px;font-size: 30px;background-color: #000418;}
      div {background-color: #0b1026;border-top: 1px solid #101944;}
      i {width: 8px;height: 8px;border-radius: 50%;margin-right: 8px;
        &.g {background-color: green;}
        &.y {background-color: yellow;}
        &.b {background-color: blue;}
        &.o {background-color: orange;}
        &.r {background-color: red;}
      }
      &:hover {border-color: #fff;
        b{color: #3440de;}
        div {color: #5862e4;}
        i {background-color: #444ecf;}
      }
    }
  }
  .options {
    .label {width: 100px;}
    .on {color: #00c8f1;}
    .el-date-editor {
      background-color: transparent;
      border-radius: 4px;
      height: 30px;
      i {display: flex;align-items: center;justify-content: center;color: #fff;}
      .el-range-separator {display: flex;align-items: center;justify-content: center;color: #fff;}
      .el-range-input {background-color: transparent;color: #fff;}
    }
  }
  .line {height: 340px;background-color: #000418;}
  .pie {height: 340px;background-color: #000418;}
  .map {height: 700px;background-color: #000418;}
  .list {padding: 20px 0 20px 20px;background-color: #000418;
    table {table-layout: fixed;width: 100%;}
    thead {border-bottom: 2px solid rgba(243, 246, 250, .2);}
    th, td {padding: 20px 12px;font-size: 14px;
      &:first-child {border-right: 2px solid rgba(243, 246, 250, .2);}
      span {cursor: pointer;color: #2a36e0;}
      span + span {margin-left: 30px;}
    }

    th {color: rgba(255, 255, 255, .8);}
    td {text-align: center;}
    i {width: 8px;height: 8px;border-radius: 4px;margin-right: 8px;flex-shrink: 0;
      &.g {background-color: green;}
      &.y {background-color: yellow;}
      &.b {background-color: blue;}
      &.o {background-color: orange;}
      &.r {background-color: red;}
    }
  }
}
</style>
